<template>
  <j-modal
    :title="(editId ? '编辑' : '新增') + tabs[editType]"
    :width="800"
    :visible.sync="modalVisible"
    :maskClosable="false"
    switchFullscreen
  >
    <a-spin :spinning="submitLoading">
      <a-form-model ref="form" :model="formData" :rules="rules">
        <a-form-model-item label="名称" prop="name" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="formData.name" placeholder="请输入名称" :maxLength="20"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <template #footer>
      <a-button @click="modalVisible = false"> 取消 </a-button>
      <a-button type="primary" :loading="submitLoading" @click="submit"> 保存 </a-button>
    </template>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  props: {
    // 要编辑的产品档案id，为空表示新增
    editId: {
      type: String,
      default: '',
    },
    editType: {
      type: String,
      default: '',
    },
    // 排序号,如果是新增则表示当前新增的档案在列表中的排序号
    sortNum: {
      type: Number,
      default: 0,
    },
    tabs: {
      type: Object,
      default: () => {},
    },
    // 是否显示弹框
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modalVisible: this.visible,
      submitLoading: false,
      formData: {
        name: '', // 名称
      }, // 表单数据
      rules: {
        name: [{ required: true, message: '请输入名称!' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  watch: {
    modalVisible(val) {
      this.$emit('update:visible', val)
    },
  },
  computed: {
    url() {
      return {
        add: `/hzkj-product/product/archive/archive${this.editType}Data/add`,
        edit: `/hzkj-product/product/archive/archive${this.editType}Data/edit`,
        queryById: `/hzkj-product/product/archive/archive${this.editType}Data/queryById`,
      }
    },
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          postAction(this.editId ? this.url.edit : this.url.add, {
            ...this.formData,
            sortNum: this.formData.sortNum || this.sortNum,
          })
            .then((res) => {
              if (res.success) {
                this.$message.success('操作成功')
                this.$emit('submit')
                this.modalVisible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    },
  },
  created() {
    if (this.editId) {
      // 编辑，需要回显
      this.submitLoading = true
      getAction(this.url.queryById, { id: this.editId }).then((res) => {
        if (res.success) {
          this.formData = res.result
          this.submitLoading = false
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  },
}
</script>
